<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Silver River :: Partidas</title>
		<link rel="stylesheet" href="css/estilos.css" />
	</head>
	<body>
		<div id="contenedor">
			<div id="barraIdiomas">
			</div>
			<div id="header">
				<img src="img/banner.png" width="960" height="120" alt="Silver River" />
				<h1>SILVER RIVER</h1>
			</div>
			<div id="mensajeEspera" style="display:none">
				<span id="mensaje" class="txt-mensajeEspera">Se ha unido correctamente a la partida. Esperando que inicie.</span><br/>
				<span class="txt-avisoNoRecargar"></span><br/>
				<div id="infoPartida"></div>
			</div>
			<div id="listado">
				<div id="listadoVacio" style="display:none" class="txt-noHayJuegos">No hay partidas iniciadas ni en espera. Haz click en "Crear partida" para crear una.</div>
				<table id="partidas" style="display:none">
					<thead>
						<tr>
							<th class="txt-nombre">Nombre</th>
							<th class="txt-bando">Bandos</th>
							<th class="txt-iniciada">Iniciada</th>
						</tr>
					</thead>
					<tbody id="listadoPartidas">
						<!-- ACA VAN LOS TR QUE SE GENERAN CON LA RESPUESTA DEL SERVIDOR -->
					</tbody>
				</table>
			</div>
			<div id="controles">
				<a href="#" class="boton txt-crearPartida" id="mostrarFormularioCrear">Crear partida</a>
				<a href="#" class="boton txt-cargarPartida" id="mostrarFormularioCargar">Cargar partida</a>
			</div>
			<div id="formularioCrear">
				<fieldset id="datosPartida" style="display:none">
					<div class="campoFormulario">
						<label for="nomPartida" class="txt-nombrePartida">Nombre de la partida:</label>
						<input type="text" id="nomPartida" size="30" />
					</div>
					<div class="campoFormulario">
						<label for="dificultad" class="txt-dificultad">Dificultad:</label>
						<select id="dificultad">
						    <option value="0" class="txt-facil"> Fácil </option>
						    <option value="1" class="txt-normal"> Normal </option>
						    <option value="2" class="txt-dificil"> Difícil </option>
						</select>
					</div>
				</fieldset>
				<fieldset id="datosJugador" style="display:none">
					<div class="campoFormulario">
						<label for="nomJugador" class="txt-nombreCapitan">Nombre jugador</label>
						<input type="text" id="nomJugador" size="30" />
					</div>
					<div class="campoFormulario">
						<label for="nomBando" class="txt-bando">Bando</label>
						<select id="nomBando">
							<option value="Rojo">Rojo</option>
							<option value="Azul">Azul</option>
							<option value="Verde">Verde</option>
						</select>
					</div>
					<div class="campoFormulario">
						<label for="idioma" class="txt-idioma">Idioma</label>
						<select id="idioma">
							<option value="es"> Español </option>
							<option value="en"> Inglés </option>
						</select>
					</div>
					<input type="hidden" id="idPartida" value="" />
				</fieldset>
				<div class="botonera">
					<a href="#" id="crearPartida" style="display:none" class="boton txt-crearPartida">Crear partida</a>
					<a href="#" id="unirAPartida" style="display:none" class="boton txt-unirmeAPartida">Unirme a la partida</a>
					<a href="#" id="cancelar" style="display:none" class="boton txt-cancelar">Cancelar</a>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div id="divCargando" style="display:none">
			<div>
				<img src="img/cargando.gif" />
			</div>
		</div>
		<script type="text/javascript" src="js/soap_client-2.1.js"></script>
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/funciones.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				
				obtenerTextos(function() {
					mostrarPartidas();
				});
				
				$("#cancelar").click(function(_ev) {
					_ev.preventDefault();
					mostrarPartidas();
				});
				
				$("#mostrarFormularioCrear").click(function(_ev) {
					_ev.preventDefault();
					ocultarTodo();
					$("#datosPartida").show();
					$("#datosJugador").show();
					$("#crearPartida").show();
					$("#cancelar").show();
				});

				$("#mostrarFormularioCargar").click(function(_ev) {
					_ev.preventDefault();
					ocultarTodo();
					//$("#formularioCargar").show();
					var idPartida = prompt (idiomas[idioma].diccionario["pedirCodigoCarga"]);
					if (idPartida) {
						cargarJuego(idPartida, function() {
							iniciarConsulta(true);
						}, function() {
							mostrarPartidas();
						});
					} else {
						mostrarPartidas();
					}
				});

				$("#crearPartida").click(function(_ev) {
					_ev.preventDefault();
					crearPartida(function() {
						$("#crearPartida").hide();
						iniciarConsulta();
					});
				});
				
				$("#unirAPartida").click(function (_ev) {
					_ev.preventDefault();
					agregarBando(function() {
						iniciarConsulta();
					}, function() {
						$("#unirAPartida").hide();
						mostrarPartidas();
					});
				});
				
				$(".unirAJuegoCargado").live("click", function(_ev) {
					_ev.preventDefault();
					var idPartidaBando = prompt(idiomas[idioma].diccionario["pedirCodigoCarga"]);
					if (idPartidaBando) {
						agregarBandoAPartidaCargada(idPartidaBando, function () {
							iniciarConsulta(true);
						}, function() {
							mostrarPartidas();
						});
					} else {
						mostrarPartidas();
					}
				});
				
				$(".unirAJuego").live("click", function(_ev) {
					_ev.preventDefault();
					ocultarTodo();
					var id = $(this).attr("id").split("--").pop();
					$("#idPartida").val(id);
					$("#datosJugador").show();
					$("#unirAPartida").show();
					$("#cancelar").show();
				});

				$(".itemJuego").live("click", function(_ev) {
					_ev.preventDefault();
					var id = $(this).attr("id").split("--").pop();
					$(".infoItem:visible").slideUp();
					$("#infoItem--" + id).slideDown();
				});

				$("#inicarLaPartida").live('click', function(_ev) {
					_ev.preventDefault();
					iniciarPartida();
				});

				$("#idioma").change(function() {
					var sel = $("option:selected", this).val();
					idioma = sel;
					mostrarTextos(idioma);
				});
				
				$(".selIdioma").live("click", function(_ev) {
					_ev.preventDefault();
					var idiomaSel = $(this).attr("id").split("-").pop();
					idioma = idiomaSel;
					mostrarTextos(idioma);
				});
			});
		</script>
	</body>
</html>